<!--
*- coding = utf-8 -*-
#@Time : 2023/6/24 14:51
#@Author : 管茂良
#@File : index.vue
#@web  : www.php-china.com
#@Software: WebStorm
-->
<template>
  <div class="app-container">
    <TopNav :title="'朋友圈'" :topOpacity="topOpacity">
      <template #leftIcon>
        <SvgIcon @click="handleToDiscover" :size="'15'" :iconClass="'left'" />
      </template>
      <template #rightIcon>
        <SvgIcon @click="handleSendMoment" :size="'15'" :iconClass="'camera'" />
      </template>
    </TopNav>


    <view style="width:100%;height:400rpx;position:relative">
        <CommonImage style="width:100%;height:100%" mode="widthFix" :picUrl="'/static/img/bgm.jpg'"/>
      <view class="user-info u-f" style="position:absolute;bottom:-60rpx;right:20rpx;">
        <view style="line-height:110rpx;color:white;font-size:30rpx">2222222222</view>
        <view class="margin-left-10" style="width: 140rpx;height:140rpx;border-radius: 20rpx;">
            <CommonImage style="width:100%;height:100%" mode="widthFix" :picUrl="'/static/img/doctor_img01.jpg'"/>
        </view>
      </view>
    </view>

    <view style="height:180rpx;width:100%;"></view>

    <view class="moment-main">
      <view class="u-f moment-list" v-for="(item,index) in momentsList" :key="item.nickName+'-'+index">
        <view class="margin-right-10" style="width: 100rpx;height:100rpx;border-radius: 20rpx;">
            <CommonImage style="width:100%;height:100%" mode="widthFix" :picUrl="item.headImg"/>
        </view>
        <view style="width:100%;">
          <view class="username">
            {{ item.nickName }}
          </view>
          <view class="moment-content">
            {{ item.momentContent }}
          </view>
          <view class="moment-content-other">
            {{ item?.momentOtherContent }}
          </view>
          <view class="moment-time u-f u-f-ajs">
            <view class="u-f u-f-ac u-f-ajc" id="time">{{ item.momentTime }}</view>
            <view class="u-f u-f-ac u-f-ajc" id="other-options">
              <SvgIcon :size="'15'" :iconClass="'more'" />
            </view>
          </view>
          <view class="moment-comment">
            222222222
          </view>
        </view>
      </view>
    </view>

  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import _ from "lodash"
import {handlePageTo} from "@/utils/utils";
import TopNav from "@/components/topNav/index"
import CommonImage from "@/components/commonImage/index"

let momentsList = ref([
  {
    id:1,
    uid:1,
    nickName:"111111",
    headImg:"/static/img/doctor_img01.png",//用户头像
    momentContent:"333333333",//发布内容
    momentOtherContent:"4444444444",//发布其他内容(图片，视频)
    momentTime:"555555",//发布时间
    momentComments:[],//评论区
  },{
    id:2,
    uid:2,
    nickName:"111111",
    headImg:"/static/img/doctor_img01.png",//用户头像
    momentContent:"333333333",//发布内容
    momentOtherContent:"4444444444",//发布其他内容
    momentTime:"555555",//发布时间
  },{
    id:3,
    uid:3,
    nickName:"111111",
    headImg:"/static/img/doctor_img01.png",//用户头像
    momentContent:"333333333",//发布内容
    momentOtherContent:"4444444444",//发布其他内容
    momentTime:"555555",//发布时间
  },{
    id:4,
    uid:4,
    nickName:"111111",
    headImg:"/static/img/doctor_img01.png",//用户头像
    momentContent:"333333333",//发布内容
    momentOtherContent:"4444444444",//发布其他内容
    momentTime:"555555",//发布时间
  },{
    id:5,
    uid:5,
    nickName:"111111",
    headImg:"/static/img/doctor_img01.png",//用户头像
    momentContent:"333333333",//发布内容
    momentOtherContent:"4444444444",//发布其他内容
    momentTime:"555555",//发布时间
  },{
    id:6,
    uid:6,
    nickName:"111111",
    headImg:"/static/img/doctor_img01.png",//用户头像
    momentContent:"333333333",//发布内容
    momentOtherContent:"4444444444",//发布其他内容
    momentTime:"555555",//发布时间
  },{
    id:7,
    uid:7,
    nickName:"111111",
    headImg:"/static/img/doctor_img01.png",//用户头像
    momentContent:"333333333",//发布内容
    momentOtherContent:"4444444444",//发布其他内容
    momentTime:"555555",//发布时间
  }
]);
let topOpacity = ref(0.8)

//返回瞬间页面
const handleToDiscover = ()=>{
  handlePageTo("switchTab","/pageDiscover/index")
}

//发布瞬间
const handleSendMoment = ()=>{
  handlePageTo("switchTab","/pageDiscover/moments/sendMoments/index")
}

const handleWindowScroll = ()=>{
  window.addEventListener("scroll",_.throttle((e) => {
    let scrollTop = e.srcElement.scrollingElement.scrollTop
    topOpacity.value = scrollTop>=190?1:0.8;
  },200 ))
}

onMounted(()=>{
  handleWindowScroll()
})

</script>

<style scoped lang="less">
.app-container{
  min-height:100vh;
  height:100%;
  background:@--background-light-three;
}
.moment-list{
  margin-bottom: 40rpx;
  padding:0rpx 20rpx 0px 30rpx;
  .username{
    color:#5B6A91;
    font-size:34rpx;
    line-height:40rpx;
  }
  .moment-content{
    color:#1A1A1A;
    font-size:26rpx;
    line-height:46rpx;
    font-weight:bold;
  }
  .moment-content-other{
    //margin-bottom:8rpx;
  }
  .moment-time{
    width:100%;
    margin:14rpx 0rpx;
    #time{
      font-size:28rpx;
      color:#B3B3B3;
    }
    #other-options{
      border-radius:8rpx;
      padding:2rpx 4rpx;
      background:#F9F9F9;
      color:#8C97B2;
    }
  }
  .moment-comment{
    width:100%;
    font-size:28rpx;
    padding:10rpx;
    background:#F7F7F7;
  }
}
</style>
